<template>
	<cl-dialog
		:title="`${type == 'add' ? '新增' : type == 'copy' ? '复制' : '修改'}广告账户`"
		:visible.sync="visible"
		width="30%"
		append-to-body
		@close="reset"
	>
		<el-form
			:model="form"
			:rules="rules"
			ref="form"
			label-width="100px"
			label-position="top"
			class="demo-form"
		>
			<el-form-item label="所属事业部" prop="biz_id">
				<cl-select
					v-model="form.biz_id"
					@change="changeBiz"
					placeholder="请选择所属事业部"
					filterable
					style="width: 100%"
					:disabled="type == 'edit'"
				>
					<el-option
						v-for="(item, index) in business"
						:key="index"
						:label="item.biz_name"
						:value="item.biz_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="品牌" prop="bra_id">
				<cl-select v-model="form.bra_id" style="width: 100%" placeholder="请选择品牌">
					<el-option
						v-for="item in bizRefData.brand"
						:key="item.bra_id"
						:label="item.bra_name"
						:value="item.bra_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="所属渠道" prop="channel_id">
				<cl-select
					style="width: 100%"
					placeholder="请选择绑定渠道"
					@change="getAccountList"
					filterable
					v-model="form.channel_id"
				>
					<el-option
						v-for="(item, index) in sourceList"
						:key="index"
						:disabled="item.status != 1"
						:label="item.cname"
						:value="item.id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="账户Token" prop="token" v-if="selected_media_platform == 4">
				<el-input v-model="form.token" placeholder="账户Token" />
			</el-form-item>
			<el-form-item label="广告账户ID" prop="supplie_id">
				<el-input v-model="form.supplie_id" placeholder="广告账户ID" />
			</el-form-item>
			<el-form-item label="广告账户类型" prop="type">
				<cl-select v-model="form.type" placeholder="请选择广告账户类型" style="width: 100%">
					<el-option label="加微" :value="2" />
					<el-option label="表单" :value="1" />
				</cl-select>
			</el-form-item>
			<el-form-item label="广告账号" prop="account_id">
				<cl-select v-model="form.account_id" placeholder="请选择广告账号" style="width: 100%">
					<el-option
						v-for="(item, index) in accountList"
						:key="index"
						:label="item.name"
						:value="item.id"
					/>
				</cl-select>
			</el-form-item>

			<el-form-item label="绑定推广人" prop="operator_user_id">
				<cl-select
					v-model="form.operator_user_id"
					placeholder="请选择绑定推广人"
					filterable
					style="width: 100%"
				>
					<el-option
						:value="item.user_id"
						:label="item.user_name"
						v-for="(item, index) in userList"
						:key="index"
					/>
				</cl-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
		<!-- <cl-staff-form ref="addform" :isModal="false" @confirm="getDeptUserList" /> -->
		<setting-help ref="help" :helps="helps" />
	</cl-dialog>
</template>

<script>
import SettingHelp from "@/components/setting-help";
export default {
	components: {
		SettingHelp
	},
	data() {
		return {
			saving: false,
			visible: false,
			type: "",
			form: {
				biz_id: "", //事业部id
				channel_id: "", //渠道id
				supplie_id: "", //广告账户账号
				operator_user_id: "", //推广人
				bra_id: "", //品牌id
				type: "", //添加类型
				id: undefined, //id
				oe_id: "", // 推广账号id
				oe_caid: "", // 青鸟线索id
				oe_instance_id: "", // 号码包id
				account_id: "",
				token: ""
			},
			selected_media_platform: 0,
			accountList: [],
			rules: {
				biz_id: [{ required: true, message: "请选择所属事业部" }],
				operator_user_id: [{ required: true, message: "请选择绑定推广人" }],
				channel_id: [{ required: true, message: "请选择绑定渠道" }],
				supplie_id: [{ required: true, message: "请填写广告账户账号" }],
				type: [{ required: true, message: "请选择添加广告账户类型" }],
				bra_id: [{ required: true, message: "请选择品牌" }],
				account_id: [{ required: false, message: "请选择广告账号" }],
				// oe_id: [{ required: true, message: "请选择选择推广账号" }],
				// oe_caid: [{ required: true, message: "请填写青鸟线索id" }],
				// oe_instance_id: [{ required: true, message: "请填写号码包id" }]
			},
			sourceList: [],
			userList: [],
			helps: [
				{
					title: "如何获取青鸟线索ID",
					content: [
						{
							// title: `打开浏览器，在地址栏输入巨量引擎地址：<a href="https://business.oceanengine.com/site/login">https://business.oceanengine.com/site/login</a>`,
							title: `登录巨量引擎进入青鸟线索通，查看地址栏，复制“caid=”后面的一串数字`,
							img: [require(`@/assets/img/help/oceanEngine/1-1.png`)]
						}
					]
				},
				{
					title: "如何获取号码包ID",
					content: [
						{
							title: `登录巨量引擎进入青鸟线索通，点击左侧“微信号码包”，在基础信息第一行找到并复制“活动ID”`,
							img: [require(`@/assets/img/help/oceanEngine/2-1.png`)]
						}
					]
				}
			]
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		open(row, type) {
			this.type = type;
			if (type != "add") {
				this.form = { ...row };
			}
			this.init();
			this.visible = true
		},
		async init() {
			const { biz_id } = this.form;
			this.getBizRefBrand(biz_id);
			this.getSourceList();
			this.getDeptUserList();
			
		},
		//新增推广人
		addStaff() {
			this.$refs.addform.open("add", {});
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				const { biz_id } = this.form;
				await this.$service.config[
					this.type == "add" || this.type == "copy" ? "distributorAdd" : "distributorEdit"
				](this.form).done(() => {
					this.saving = false;
				});
				// this.$refs.drawer.close();
				this.$message.success(
					`${this.type == "add" ? "新增" : this.type == "copy" ? "复制" : "修改"}成功`
				);
				this.$emit("refresh", biz_id, this.type == "edit" ? false : true);
				this.close();
			});
		},
		reset() {
			this.saving = false;
			this.$refs.form.resetFields();
			this.resetForm();
		},
		close() {
			this.reset();
			this.visible = false
		},
		//切换事业部
		changeBiz() {
			this.form.bra_id = "";
			this.form.channel_id = "";
			this.form.operator_user_id = "";
			this.init();
		},
		openHelp(index = 1) {
			this.$refs.help.open(index);
		},

		//渠道
		async getSourceList() {
			const { biz_id } = this.form;
			this.sourceList = [];
			if (!biz_id) return;
			const res = await this.$service.source.list({ biz_id });
			this.sourceList = res;
		},
		// 推广人
		async getDeptUserList() {
			const { biz_id } = this.form;
			this.userList = [];
			if (!biz_id) return;
			const res = await this.$service.user.deptuserlists({ biz_id, post: 4 });
			this.userList = res;
		},
		resetForm() {
			this.$resetFields(this.form);
			this.form.biz_id = this.getCurrBiz();
			this.form.id = undefined;
		},
		async getAccountList(){
			const { biz_id, channel_id } = this.form;
			this.sourceList.map((i) => {
				if (i.id == channel_id) {
					this.selected_media_platform = i.media_platform
				}
			});
			if (!biz_id) return;
			this.accountList = await this.$service.oceanengine.accountList({biz_id, channel_id})
		}
	}
};
</script>

<style></style>
